<template>
<div>
    <el-row>
        <el-col :span="24">
            <!--删除过程中，不允许其他操作-->
            <el-button v-if="!showDeleteCheckbox" type="primary" @click="dialogFormVisible = true; form = {};">
                add
            </el-button>
            <el-button v-if="!showDeleteCheckbox" @click="showDeleteCheckbox = true;" type="danger">
                delete
            </el-button>
            <!--删除过程中，只出现确认删除按钮-->
            <el-button v-if="showDeleteCheckbox"
                       @click="deleteTableItem(chosenItem); showDeleteCheckbox = false; chosenItem = [];"
                       type="danger">
                delete confirm
            </el-button>
            <el-button v-if="showDeleteCheckbox"
                       @click="showDeleteCheckbox = false;">
                cancel
            </el-button>
        </el-col>
    </el-row>

    <el-table stripe :data="tableData" style="border: 1px solid #ebebeb; border-radius: 3px; margin-top: 10px;">
        <el-table-column prop="id" label="id" width="100">
            <template slot-scope="scope">
                <!--el-checkbox 多选框，checked 绑定是否选中，click 绑定点击事件-->
                <el-checkbox v-if="showDeleteCheckbox" :checked="chosenItem.indexOf(scope.row.id) > -1"
                             @change="toggleChosenItem(scope.row.id)" style="margin-right: 5px;"></el-checkbox>
                <span>{{scope.row.id}}</span>
            </template>
        </el-table-column>
        <el-table-column prop="date" label="date" width="200"></el-table-column>
        <el-table-column prop="name" label="name" width="200"></el-table-column>
        <el-table-column prop="phone" label="phone" width="200"></el-table-column>
        <el-table-column prop="address" label="address"></el-table-column>
        <el-table-column fixed="right" label="operation" width="300">
            <template slot-scope="scope">
                <!--删除过程中，禁用其他操作-->
                <el-button :disabled="showDeleteCheckbox" @click="form = {...scope.row}; dialogFormVisible = true;" type="info" size="small"> edit </el-button>
                <el-button :disabled="showDeleteCheckbox" @click="deleteTableItem([scope.row.id])" type="danger" size="small"> delete </el-button>
                <el-button :disabled="showDeleteCheckbox" @click="moveTableItem(scope.row.id, 'up')" size="small"> up </el-button>
                <el-button :disabled="showDeleteCheckbox" @click="moveTableItem(scope.row.id, 'down')" size="small"> down </el-button>
            </template>
        </el-table-column>
    </el-table>

    <!--form-->
    <!--el-dialog 是弹窗样式，title 绑定弹窗的标题内容，visible 绑定弹窗是否展示-->
    <el-dialog title="add" :visible.sync="dialogFormVisible">
        <el-form :model="form" :rules="formRules" ref="form">
            <!--el-form-item 绑定表单样式，label 表单的名称，formLabelWidth 设置 label 的宽度, 设置 prop 来进行规则校验-->
            <el-form-item label="date" :label-width="formLabelWidth" prop="date">
                <!--里面装载表单元素，这里装了个选择日期的组件，v-model 绑定选择值，value-format设置绑定值的格式，type 设置选择的范围，这里 date 表示到天-->
                <el-date-picker v-model="form.date" value-format="yyyy-MM-dd" type="date" placeholder="select date"></el-date-picker>
            </el-form-item>

            <el-form-item label="name" :label-width="formLabelWidth" prop="name">
                <el-input v-model="form.name"></el-input>
            </el-form-item>

            <el-form-item label="phone" :label-width="formLabelWidth" prop="phone">
                <el-input v-model="form.phone" type="tel"></el-input>
            </el-form-item>

            <el-form-item label="address" :label-width="formLabelWidth" prop="address">
                <el-input v-model="form.address"></el-input>
            </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
            <!--点击取消的时候，设置弹窗不可见-->
            <el-button @click="dialogFormVisible = false">cancel</el-button>
            <!--点击确定的时候，设置弹窗不可见，同时添加一项内容-->
            <el-button type="primary" @click="submitForm">confirm</el-button>
        </div>
    </el-dialog>
</div>
</template>

<script>
import {checkPhoneValidator} from "../../utils/validator";

const tableItem = {
    date: "2020-09-13",
    name: "flwwsg",
    phone: "88888888888",
    address: "need not care"
};

const tableData = Array(20).fill(tableItem).map((x, i) => {
            return {id: i+1, ...x};
        });

// vue component

export default {
    data() {
        return {
            tableData,
            dialogFormVisible: false,
            form: {},
            formLabelWidth: "120px",
            // 是否批量删除
            showDeleteCheckbox: false,
            // 选中的选项
            chosenItem: [],
            formRules: {
                date: [
                    { type: "string", required: true, message: "please select date", trigger: "change" }
                ],
                name: [
                    { required: true, message: "please input name", trigger: "change" },
                    { min: 2, max: 10, message: "length must between 2 to 10 character", trigger: "blur" }
                ],
                phone: [
                    { required: true, validator: checkPhoneValidator, triangle: "blur" }
                ]
            }
        };
    },

    methods: {
        // 新增、修改一个数据
        updateTableItem(item = {}) {
            if(item.id !== undefined) {
                let itemIndex = this.tableData.findIndex( x => x.id === item.id);
                if(itemIndex > -1) {
                    this.tableData.splice(itemIndex, 1, {...item})
                }
            } else {
                // 添加到列表中，同时自增 id
                this.tableData.push({...item, id: this.tableData.length + 1});
            }
        },
        // 删除一个数据
        deleteTableItem(idArray) {
            this.tableData = this.tableData.filter(x => idArray.indexOf(x.id) === -1);
        },

        // 移动数据
        moveTableItem(id, direction) {
            const dataLength = this.tableData.length;
            const index = this.tableData.findIndex(x => x.id === id);
            switch (direction) {
                case "up":
                    // 第一个不上移
                    if(index > 0) {
                        const item = this.tableData.splice(index, 1)[0];
                        this.tableData.splice(index-1, 0, item)
                    }
                    break;
                case "down":
                    // 最后一个不下移
                    if(index < dataLength -1) {
                        const item = this.tableData.splice(index, 1)[0];
                        this.tableData.splice(index+1, 0, item);
                    }
                    break;
            }
        },

        // 切换选中的选项
        toggleChosenItem(id) {
            const index = this.chosenItem.findIndex(x => x.id === id);
            if(index > -1) {
                // 有该选项，删除
                this.chosenItem.splice(index, 1);
            } else {
                // 无该选项，添加
                this.chosenItem.push(id);
            }
        },

        // 提交表单
        submitForm() {
            this.$refs["form"].validate((valid) => {
                if(valid) {
                    this.dialogFormVisible = false;
                    this.updateTableItem(this.form);
                } else {
                    // 校验失败
                    return false;
                }
            });

        },
    }
}
</script>

<style scoped>

</style>